<template v-if="dataFrom!=1">
<!--  费用报表-->
  <el-container class="layout-container-demo" style="height: 100%">
    <el-header style="
        text-align: right;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;">
       <div style="
          background-color: rgb(54, 141, 249);
          width: 200px;
          height: 60px;
          font-size: 15px;
          color: #ffffff;
          text-align: center;
          line-height: 60px;">
         摆烂股份有限公司
       </div>
       <div style="display: flex;align-items: center">
         <!--考勤小按钮-->

         <el-dropdown>
        <span
            class="el-dropdown-link"
            style="display: flex; align-items: center; justify-content: flex-end"
        >
          <div class="block">
            <el-avatar :size="50" :src="circleUrl" />
          </div>
          <div style="font-size: 15px; color: #ffffff; margin-right: 10px" v-if="dataFrom!=1">
           {{dataFrom.recordName}}
          </div>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
           <template #dropdown>
             <el-dropdown-menu>
               <div class="Personal_Div_Information">
                 <div class="Personal_Information">
                   <div class="Personal_Img">
                     <el-avatar
                         @click="visible = true"
                         :size="40"
                         :src="circleUrl"
                     />
                   </div>
                   <div class="Personal_Dept">
                     <span class="Personal_Name">  {{dataFrom.recordName}}</span>
                     <span class="Personal_Position" v-if="dataFrom!=1">{{dataFrom.staffRecord.positionTable.positionName}}</span>
                     <br />
                     <div v-if="dataFrom!=1"><span>摆烂股份有限公司</span>/<span>{{dataFrom.staffRecord.department.departmentName}} </span></div>
                   </div>
                 </div>
                 <div class="Underline"></div>
               </div>
               <div class="Personal_Sign_Out">
                 <el-dropdown-item>
                   <router-link :to="{ path: '/parson' }" event="mouseover">
                     <el-icon><User /></el-icon>
                     个人中心
                   </router-link>
                 </el-dropdown-item>
                 <el-dropdown-item>
                   <router-link :to="{ path: '/login' }" event="mouseover">
                     <el-icon><SwitchButton /></el-icon>
                     退出
                   </router-link>
                 </el-dropdown-item>
               </div>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
       </div>
    </el-header>

    <el-container>
      <el-aside width="200px">
        <el-scrollbar height="675px">
          <el-menu
              active-text-color="#fFfFfFCC"
              background-color="#2a2e35"
              class="el-menu-vertical-demo"
              text-color="#fff"
              router
              @open="handleOpen"
              @close="handleClose"
              :default-active="onRoutes"
          >
<!--            <el-sub-menu :index="index"  v-for="(menuZu,index) in menu">-->
<!--              <template #title>-->
<!--                <el-icon><message /></el-icon>-->
<!--                {{ menuZu.menuName }}-->
<!--              </template>-->
<!--&lt;!&ndash;              <el-menu-item-group v-for="(menuZi,indexOne) in menuZu.menuList">&ndash;&gt;-->
<!--&lt;!&ndash;                <el-menu-item :index="menuZi.id" :route="{path:`${menuZi.path}`}" >{{ menuZi.menuName }}</el-menu-item>&ndash;&gt;-->

<!--&lt;!&ndash;              </el-menu-item-group>&ndash;&gt;-->
<!--            </el-sub-menu>-->
            <HomeMenu :MenuZi="menu"></HomeMenu>



          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-main style="background-color: rgb(244, 244, 244)">
        <el-scrollbar>
          <router-view></router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import {computed, onMounted, reactive, ref} from "vue";
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
import HomeMenu from "./HomeMenu.vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import axios from "axios";
const defaultRoute = ref("/system")

const router=useRouter()
const store = useStore()
const dataFrom    =ref(1);
const id =store.state.userData==null?-1:store.state.userData.data.userLogin.sysUser.userPosition
console.log(store.state.userData,"dd")
axios.get(`http://localhost:1688/recordDubbo/userRecordDubbo/${id}`).then(data=>{

  console.log(data.data.data,"userRecord")
  dataFrom.value= data.data.data
})
/**
 * 返回当前路由
 */
const onRoutes = computed(() => {
  const path =router.currentRoute.value.fullPath;
  console.log(path)
  var formdata =new FormData();
  formdata.append("path",path)
   pathid(formdata)
  console.log(pathidf)
  return pathidf.value;
});
const pathidf = ref(0)
const pathid = async function (formdata){
  await  axios.post(`http://localhost:1688/login/pathId`,formdata).then(data=>{
    console.log(data.data.data)
    pathidf.value= data.data.data.id;
  })
}
const user =
    JSON.parse(sessionStorage.getItem("vuex"))?JSON.parse(sessionStorage.getItem("vuex")).userData.data.userLogin:null;
const menu =ref({});
const circleUrl = ref("../src/assets/touxiang.jpg");
onMounted(()=>{

  menuDataS()

})
const menuDataS=async ()=>{
  if(user){
    const url =`http://localhost:1688/login/menu/${user.sysUser.id}`
    //访问公共的
    await axios.get(url).then((data)=>{
      menu.value =data.data.data;
      console.log(data.data.data,"home")
    })
  }
}
const item = {
  date: "2016-05-02",
  name: "Tom",
  address: "No. 189, Grove St, Los Angeles",
};
const hidddiv=ref(false)

const tableData = ref(Array.from({ length: 20 }).fill(item));
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: rgb(42, 112, 194);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: rgb(43, 46, 53);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  /*padding: 0;*/
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*height: 100%;*/
  right: 20px;
}
.el-header {
  padding: 0px;
}
.block {
  margin-right: 10px;
}

.home_table {
  width: 200px;
  height: 150px;
  /*text-align: center;*/
  display: flex;
  /*line-height: 50px;*/
}
.Personal_Div_Information {
  width: 220px;
  height: 65px;
}
.Personal_Information {
  display: flex;
  align-items: center;
}

.Personal_Img {
  padding: 7px;
  width: 40px;
  height: 40px;
}
.Underline {
  width: 100%;
  height: 1px;
  margin: 5px 0;
  background: #e9e9e9;
}
.Personal_Dept {
  width: 150px;
  margin: 0px 0px 0px 10px;
  height: 54px;
  line-height: 27px;
  color: #909090;
}
.Personal_Position {
  margin: 0px 0px 0px 10px;
}
.Personal_Name {
  color: #4d7ad8;
}
.el-dropdown-menu__item a {
  text-decoration: none;
  color: #656b72;
  width: 100%;
}
.el-dropdown-menu__item a:hover {
  text-decoration: none;
  color: #656b72;
}
.Personal_Sign_Out li:hover {
  background-color: #eaeaea;
}
.el-scrollbar__view {
  height: 100%;
}
.el-main {
  padding: 12px;
}
</style>